<template>
  <el-header>
    <section class="left">
      <section class="logo">
        <img src="/images/logo.png">
      </section>
    </section>
    <section class="right">
      <el-button class="minimize" @click="minimize">-</el-button>
      <el-button @click="close">×</el-button>
    </section>
  </el-header>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const { ipcRenderer } = window.require('electron')
let state = reactive({
  name: '按钮'
})

let minimize = () => {
  ipcRenderer.send('minimize')
}

let close = () => {
  ipcRenderer.send('close')
}
</script>

<style lang="scss">
.el-header {
  width: 100%;
  height: 50px !important;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: left;
    align-items: center;
    .logo {
      width: 80px;
      height: 30px;
      img {
        height: 100%;
      }
    }
  }

  .right {
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: right;
    align-items: center;

    .el-button {
      background-color: transparent;
      border: none;
      font-size: 30px;
      font-family: emoji;

      &.minimize {
        font-size: 34px;
      }

      &:focus,
      &:hover {
        color: #fff;
      }
    }
  }
}
</style>